<template>
  <!-- 热门商品 -->
  <view class="goods-hot">
    <view class="span-top">
      <view class="span-title">
        <image src="../../static/title-icon.svg" class="span-title-icon"></image>
        热门商品
        <image src="../../static/title-icon.svg" class="span-title-icon"></image>
      </view>
      <view class="span-right"></view>
    </view>

    <view class="goods-hot-list">
      <view class="goods-hot-item" v-for="item in hostList" :key="item.id">
        <image :src="item.cover_url"></image>
        <view class="title">{{ item.name }}</view>
        <view class="price">
          <text>￥</text>
          {{ formatPrice(item.price).big }}
          <text>.{{ formatPrice(item.price).small }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { formatPrice } from '../../utils/formatPrice'
export default {
  data() {
    return {
      hostList: [],
      formatPrice
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    async getData() {
      const { data: res } = await uni.request({
        url: this.$domain.data + '/getHostGoodsList'
      })

      if (res.status !== 200) {
        uni.showToast({
          icon: 'none',
          title: '服务器出错'
        })
        return
      }

      this.hostList = res.data
      console.log(res)
    }
  }
}
</script>

<style scoped lang="scss">
$info-padding: 40upx;
$info-size: 30upx;
$info-radius: 30upx;
$info-border-color: rgba(
  $color: #000000,
  $alpha: 0.05
);

.goods-hot {
  font-size: $info-size;
  box-sizing: border-box;
  padding: $info-padding;
  border-radius: $info-radius;
  box-shadow: $def-shadow;
  background-color: #fff;
  width: 100%;
  margin-bottom: 20upx;

  .span-top {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;

    .span-title {
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: 900;

      .span-title-count {
        font-weight: normal;
        font-size: 20upx;
        margin-left: 10upx;
      }
    }

    .span-title-icon {
      width: 50upx;
      height: 50upx;
    }

    .span-right {
      color: #c0c4cc;
      font-size: 25upx;
    }
  }
  .goods-hot-list {
    width: 100%;
    padding-top: 20upx;
    padding-bottom: 20upx;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30upx;

    .goods-hot-item {
      margin: 0 auto;

      image {
        border-radius: 10upx;
        width: 190upx;
        height: 190upx;
      }

      .title {
        margin: 5upx 0;
        font-size: 28upx;
      }

      .price {
        font-weight: 900;
        color: $def-price-color;
        text {
          font-size: 23upx;
        }
      }
    }
  }
}
</style>
